<!DOCTYPE html>
<html>

<head>
    <title>vue结合原生js实现拖动</title>
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>

<body>
    <script>
        /* vue-自定义指令-拖拽 */
        Vue.directive('drag', function () {
            var oDiv = this.el;
            oDiv.onmousedown = function (ev) {
                var disX = ev.clientX - oDiv.offsetLeft;
                var disY = ev.clientY - oDiv.offsetTop;
                document.onmousemove = function (ev) {
                    var l = ev.clientX - disX;
                    var t = ev.clientY - disY;
                    oDiv.style.left = l + 'px';
                    oDiv.style.top = t + 'px';
                };
                document.onmouseup = function () {
                    document.onmousemove = null;
                    document.onmouseup = null;
                };
            };
        });
        window.onload = function () {
            var vm = new Vue({
                el: '#box',
                data: {
                    msg: 'welcome'
                }
            });
        };
    </script>
    </head>

    <body>
        <div id="box">
            <div v-drag
                :style="{width:'100px', height:'100px', background:'blue', position:'absolute', right:0, top:0}">
            </div>
            <div v-drag :style="{width:'100px', height:'100px', background:'red', position:'absolute', left:0, top:0}">
            </div>
        </div>
    </body>
</body>

</html>